import React from 'react'
import {KindModel} from '../api/kind'
import {Button,Divider,Table,Modal,Input,message} from 'antd'
const kindModel=new KindModel()
const { confirm } = Modal

class Kind extends React.Component{
  constructor(props) {
    super(props);
    this.state={
      list:[],
      visible:false,
      ifEdit:false,
      id:0,
      modelTitle:'编辑品类',
      nameValue:'123'
    }

    this.getList()
  }

  getList(){
    kindModel.getList()
      .then(res=>{
        if(res.code===0){
          this.setState({
            list:res.data
          })
        }
      })
      .catch(err=>{
        console.log(err);
      })
  }

  openUpdateModel(record){
    this.setState({
      ifEdit:true,
      visible:true,
      modelTitle:'编辑品类',
      id:record._id,
      nameValue:record.name
    })
  }
  openDeleteModel(record){
    const _this=this
    confirm({
      title: '删除品类',
      content: '是否确定删除此品类',
      onOk() {
        kindModel.deleteKind(record._id).then(res=>{
          if(res.code===0){
            message.success("删除成功")
            _this.getList()
          }
        }).catch(error=>{
          message.error('删除失败')
        })
      },
      onCancel() {},
    })
  }
  openCreateModel(){
    this.setState({
      ifEdit:false,
      visible:true,
      modelTitle:'新建品类',
      id:0,
      nameValue:''
    })
  }
  handleOk(){
    const {id,nameValue}=this.state
    if(this.state.ifEdit){
      this.updateKind(id,nameValue)
    }else{
      this.createKind(nameValue)
    }
  }

  createKind(name){
    kindModel.createKind(name)
      .then(res=>{
        if(res.code===0){
          message.success('创建成功')
          this.getList()
          this.setState({
            visible:false
          })
        }
      }).catch(err=>{
        message.error('创建失败')
    })
  }

  updateKind(id,name){
    kindModel.editKind(id,name)
      .then(res=>{
        if(res.code===0){
          message.success('修改成功')
          this.getList()
          this.setState({
            visible:false
          })
        }
      }).catch(err=>{
      message.error('修改失败')
    })
  }

  handleCancel(){
    this.setState({
      visible:false
    })
  }
  changeNameValue(e){
    this.setState({
      nameValue:e.target.value
    })
  }

  render() {
    const columns=[
      {
        title: '名称',
        dataIndex: 'name',
        key: 'name',
      },{
        title: '操作',
        key: 'action',
        render:(text, record)=>(
          <span>
            <Button type="link" onClick={()=>this.openUpdateModel(record)} >编辑</Button>
            <Divider type="vertical" />
            <Button type="link" onClick={()=>this.openDeleteModel(record)}>删除</Button>
          </span>
        )
      }
    ]
    return (
      <div>
        <Button onClick={()=>this.openCreateModel()} type="primary">添加</Button>
        <br/><br/>
        <Table
          rowKey={record=>record._id}
          dataSource={this.state.list}
          columns={columns} />
        <Modal
          title={this.state.modelTitle}
          visible={this.state.visible}
          onOk={()=>this.handleOk()}
          onCancel={()=>this.handleCancel()}
        >
          <p>
            <Input
              placeholder="名称"
              value={this.state.nameValue}
              onChange={(event)=>this.changeNameValue(event)}
            />
          </p>
        </Modal>
      </div>
    );
  }
}

export default Kind;
